<!--新页面模板-->
<template>
  <!--  养护工程-->
  <div class="box-view">
    <el-row :gutter="15">
      <el-col :span="4" class="left_org">
        <!-- 搜索框 -->
        <organization-tree v-model="deptTree" ref="deptTree" :changeOnSelect='true' placeholder="选择管养单位"
                           @change="selectOrgHandel"></organization-tree>
      </el-col>
      <el-col :span="20">
        <div class="page">
          <div style="padding: 20px 0px 0px 20px">
            <el-breadcrumb separator-class="el-icon-arrow-right">
              <el-breadcrumb-item @click.native="breadClick(item.deptTreeIdList)" v-for="item in deptTree.breadList"
                                  :key="item.name">
                <el-button type="text" class="bread_button_text">{{item.deptName}}</el-button>
              </el-breadcrumb-item>
            </el-breadcrumb>
          </div>
          <el-divider></el-divider>
          <div class="page_filter">
            <el-autocomplete
              v-model="state"
              clearable
              :fetch-suggestions="querySearchAsync"
              placeholder="请输入路线名称或编号"
              @change="handleChange"
              @select="handleSelect"
            ></el-autocomplete>
            <el-select v-model="form.progressType" filterable clearable placeholder="请选择工程状态">
              <el-option
                v-for="item in EnumProgressList"
                :key="item.code"
                :label="item.name"
                :value="item.code">
              </el-option>
            </el-select>
            <el-button class="common_btn-defalut" icon="el-icon-search" @click="form.page=1;queryList()">搜索</el-button>
          </div>
          <div class="page_main">
            <el-button class=" common_btn-defalut" style="margin-bottom: 20px" @click="add"
                       :disabled="hasPermission('slope:progress:add')?false:'disabled'">添加养护工程
            </el-button>
            <div class="common_btnBox">
              <i class="iconfont iconzongshu icon-size"></i>
              总数：{{form.total}}
            </div>
            <el-table :data="tableList" border>
              <el-table-column label="序号" width="70">
                <template slot-scope="scope">
                  {{getIndex(scope.$index)}}
                </template>
              </el-table-column>
              <el-table-column prop="damageName" show-overflow-tooltip min-width="120" label="灾害点名称"></el-table-column>
              <el-table-column prop="roadName" show-overflow-tooltip min-width="120" label="路线名称"></el-table-column>
              <el-table-column prop="deptTreeName" show-overflow-tooltip min-width="160" label="管养单位"></el-table-column>
              <el-table-column show-overflow-tooltip width="120" label="状态">
                <template slot-scope="scope">
                  <el-tag size="mini" :style="scope.row.progressType | gradeStatusColor" style="color: white">
                    {{scope.row.progressTypeName}}
                  </el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="createTime" width="140" label="立项日期">
                <template slot-scope="scope">{{scope.row.createTime | formatTimer}}</template>
              </el-table-column>
              <el-table-column prop="updateTime" width="140" label="更新日期">
                <template slot-scope="scope">{{scope.row.updateTime | formatTimer}}</template>
              </el-table-column>
              <el-table-column label="操作" fixed="right" width="250">
                <template slot-scope="scope">
                  <button class="btn_edit" @click="checkDetail(scope.row)">查看详情</button>
                  <button class="btn_add" @click="editDetail(scope.row,false)"
                          v-if="hasPermission('slope:progress:add')">{{scope.row.progressType|gradeStatusButton}}
                  </button>
                  <button class="btn_edit"
                          v-if="hasPermission('slope:progress:add')&&scope.row.progressType === 4 && scope.row.percentage !== 100"
                          @click="editDetail(scope.row,true)">
                    更新施工进度
                  </button>
                </template>
              </el-table-column>
            </el-table>
            <!-- 分页器 -->
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="form.page"
              :page-size="form.pageSize"
              :page-sizes="[10, 20, 30, 40,50,60,70,80,90,100]"
              layout="sizes, prev, pager, next"
              :total="form.total">
            </el-pagination>
          </div>
          <!--更新养护工程-->
          <el-drawer
            :title="currentRow.progressType |gradeStatusButton "
            :visible.sync="updateForm"
            direction="rtl"
            custom-class="demo-drawer"
            ref="drawer"
            size="50%">
            <div class="demo-drawer__content s-detail" style="margin-top: 10px">
              <el-card style="height: 95%;overflow: auto">
                <el-divider content-position="left">灾害信息</el-divider>
                <el-row :gutter="20">
                  <el-col :span="6">
                    <ul>
                      <li>地灾名称：<span>{{currentRow.damageName}}</span></li>
                    </ul>
                  </el-col>
                  <el-col :span="18">
                    <ul>
                      <li>所在路线：<span>{{currentRow.roadName}}</span></li>
                    </ul>
                  </el-col>
                </el-row>
                <ul>
                  <li>管养单位：<span>{{currentRow.deptTreeName}}</span></li>
                </ul>
                <el-form style="margin-top: 40px" ref="updateForm" label-position="right" :rules="updateRules"
                         :model="currentRow" label-suffix="："
                         label-width="130px">
                  <el-form-item label="时间" prop="time">
                    <el-date-picker style="width: 200px"
                                    v-model="currentRow.time"
                                    type="date"
                                    placeholder="选择时间">
                    </el-date-picker>
                  </el-form-item>
                  <el-form-item v-if="currentRow.progressType === 4" label="施工进度" prop="percentage" class="file_table">
                    <el-progress :color="customColor" style="display: inline-block;width: 70%;margin-right: 10px"
                                 :text-inside="true"
                                 :stroke-width="26" :percentage="currentRow.percentage"></el-progress>
                    <el-button size="small" icon="el-icon-plus" @click="increase"></el-button>
                  </el-form-item>
                  <el-form-item label="相关文件" prop="fileList" class="file_table">
                    <upload-file avatar v-model="currentRow.fileList" ref="uploadClear"></upload-file>
                    <el-table border :data="currentRow.fileList" style="height: 200px;overflow: auto">
                      <el-table-column label="序号" width="70">
                        <template slot-scope="scope">
                          {{getIndex(scope.$index)}}
                        </template>
                      </el-table-column>
                      <el-table-column prop="name" label="文件名称"></el-table-column>
                      <el-table-column label="文件备注说明">
                        <template slot-scope="scope">
                          <el-form-item>
                            <el-input
                              v-model.trim="scope.row.info"
                              type="textarea"
                              :autosize="{ minRows: 2, maxRows: 3 }"
                              placeholder="可对文件进行简要描述"
                            ></el-input>
                          </el-form-item>
                        </template>
                      </el-table-column>
                    </el-table>
                  </el-form-item>
                  <el-form-item label="相关图1片" prop="picList" class="file_table">
                    <upload-img trigger="button" avatar :size-limit="5" @update="setFormImg"></upload-img>
                    <el-table border :data="currentRow.picList" style="height: 200px;overflow: auto">
                      <el-table-column label="序号" width="70">
                        <template slot-scope="scope">
                          {{getIndex(scope.$index)}}
                        </template>
                      </el-table-column>
                      <el-table-column label="图片" width="90">
                        <template slot-scope="scope">
                          <el-image
                            style="width: 60px; height: 60px;"
                            fit="scale-down"
                            :src="constUrl + scope.row.url"
                          ></el-image>
                        </template>
                      </el-table-column>
                      <el-table-column label="图片备注说明">
                        <template slot-scope="scope">
                          <el-form-item>
                            <el-input
                              v-model.trim="scope.row.name"
                              type="textarea"
                              :autosize="{ minRows: 2, maxRows: 3 }"
                              placeholder="可对图片进行简要描述"
                            ></el-input>
                          </el-form-item>
                        </template>
                      </el-table-column>
                      <el-table-column label="操作" width="90">
                        <template slot-scope="scope">
                          <el-button
                            type="text"
                            class="delete_button"
                            @click="handleDeleteImg(scope.$index)">删除
                          </el-button>
                        </template>
                      </el-table-column>
                    </el-table>
                  </el-form-item>
                  <el-form-item label="说明" prop="longitude">
                    <el-input
                      v-model.trim="currentRow.explanation"
                      type="textarea"
                      :autosize="{ minRows: 2, maxRows: 3 }"
                      placeholder="请输入相关说明">
                    </el-input>
                  </el-form-item>
                </el-form>
              </el-card>
            </div>
            <div class="demo-drawer__footer">
              <el-button class="common_btn-white" @click="updateForm = false">取消</el-button>
              <el-button class="common_btn-defalut" :disabled="isDsabled1" type="primary" @click="validateUpdateForm">
                确定
              </el-button>
            </div>
          </el-drawer>
          <!--添加养护工程-->
          <el-drawer
            title="添加养护工程"
            :visible.sync="newForm"
            direction="ltr"
            custom-class="demo-drawer"
            ref="drawer"
            size="50%">
            <div class="demo-drawer__content">
              <el-form style="height: 98%;overflow: auto" ref="form" label-position="right" :rules="rules"
                       :model="currentRow" label-suffix="："
                       label-width="130px">
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="选择管养单位" prop="deptTreeId">
                      <organization
                        v-model="currentRow.deptTreeId"
                        placeholder="选择管养单位"
                        @change="changeDeptOrganization"
                      ></organization>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="选择检查路线" prop="roadId">
                      <el-select v-model="currentRow.roadId" filterable clearable placeholder="请选择检查路线"
                                 @change="changeRoad" @focus="getDamagePointList('roadId')">
                        <el-option
                          v-for="item in roadList"
                          :key="item.id"
                          :label="item.name"
                          :value="item.id">
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-form-item label="灾害类型" prop="damageType">
                  <el-radio-group v-model="currentRow.damageType" size="small" @change="changeDamageType">
                    <el-radio-button
                      v-for="item in EnumDamageTypeList"
                      :key="item.code"
                      :label="item.code">
                      {{ item.name }}
                    </el-radio-button>
                  </el-radio-group>
                </el-form-item>
                <el-form-item label="灾害点" prop="damageId">
                  <el-select
                    @focus="getDamagePointList"
                    v-model="currentRow.damageId"
                    filterable
                    clearable
                    placeholder="选择灾害点">
                    <el-option
                      v-for="item in damageList"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="说明" prop="longitude">
                  <el-input
                    v-model.trim="currentRow.explanation"
                    type="textarea"
                    :autosize="{ minRows: 2, maxRows: 3 }"
                    placeholder="请输入养护工程相关说明">
                  </el-input>
                </el-form-item>
                <el-form-item label="时间" prop="time">
                  <el-date-picker style="width: 200px"
                                  v-model="currentRow.time"
                                  type="date"
                                  placeholder="选择时间">
                  </el-date-picker>
                </el-form-item>

                <el-form-item label="相关文件" prop="fileList" class="file_table">
                  <upload-file v-model="currentRow.fileList" ref="uploadClear"></upload-file>
                  <el-table border :data="currentRow.fileList" style="height: 200px;overflow: auto">
                    <el-table-column label="序号" width="70">
                      <template slot-scope="scope">
                        {{getIndex(scope.$index)}}
                      </template>
                    </el-table-column>
                    <el-table-column prop="name" label="文件名称"></el-table-column>
                    <el-table-column label="文件备注说明">
                      <template slot-scope="scope">
                        <el-form-item>
                          <el-input
                            v-model.trim="scope.row.info"
                            type="textarea"
                            :autosize="{ minRows: 2, maxRows: 3 }"
                            placeholder="可对文件进行简要描述"
                          ></el-input>
                        </el-form-item>
                      </template>
                    </el-table-column>
                  </el-table>
                </el-form-item>
                <el-form-item label="相关图片" prop="picList" class="file_table">
                  <upload-img trigger="button" avatar :size-limit="5" @update="setFormImg"></upload-img>
                  <el-table border :data="currentRow.picList" style="height: 200px;overflow: auto">
                    <el-table-column label="序号" width="70">
                      <template slot-scope="scope">
                        {{getIndex(scope.$index)}}
                      </template>
                    </el-table-column>
                    <el-table-column label="图片" width="90">
                      <template slot-scope="scope">
                        <el-image
                          style="width: 60px; height: 60px;"
                          fit="scale-down"
                          :src="constUrl + scope.row.url"
                        ></el-image>
                      </template>
                    </el-table-column>
                    <el-table-column label="图片备注说明">
                      <template slot-scope="scope">
                        <el-form-item>
                          <el-input
                            v-model.trim="scope.row.name"
                            type="textarea"
                            :autosize="{ minRows: 2, maxRows: 3 }"
                            placeholder="可对图片进行简要描述"
                          ></el-input>
                        </el-form-item>
                      </template>
                    </el-table-column>
                    <el-table-column label="操作" width="90">
                      <template slot-scope="scope">
                        <el-button
                          type="text"
                          class="delete_button"
                          @click="handleDeleteImg(scope.$index)">删除
                        </el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                </el-form-item>
              </el-form>
            </div>
            <div class="demo-drawer__footer">
              <el-button class="common_btn-white" @click="newForm = false">取消</el-button>
              <el-button class="common_btn-defalut" type="primary" @click="validateForm">确定</el-button>
            </div>
            <!--新增-->
          </el-drawer>
          <!--时间轴-->
          <el-drawer
            title="查看轨迹"
            :visible.sync="timeline"
            direction="rtl"
            custom-class="demo-drawer"
            ref="drawer"
            size="50%">
            <div class="demo-drawer__content time_line">
              <el-timeline style="height: 800px;overflow: auto">
                <el-timeline-item
                  v-for="(item, index) in timelineData"
                  :key="index"
                  color="#0bbd87"
                  :timestamp="item.createTime | formatTimer"
                  placement="top">
                  <el-card>
                    <el-row :gutter="10">
                      <el-col :span="8">
                        <p class="status">
                          <el-tag size="medium" :style="item.status | gradeStatusColor" effect="dark"
                                  style="color: white">
                            {{item.statusName}}
                          </el-tag>
                        </p>
                        <p class="info">操作单位：{{item.companyName}}</p>
                        <p class="info" v-if="item.explanation">说明：{{item.explanation}}</p>
                      </el-col>
                      <!--相关文件和图片-->
                      <el-col :span="8">
                        <el-alert
                          :closable="false" title="相关文件，可点击下载" type="info" show-icon>
                        </el-alert>
                        <a v-for="file in item.fileList" :key="file.url" style="color: #1990FE;text-align: left"
                           :href="constUrl + file.url"
                           :download="file.name">
                          <p style="font-size: 20px"><i class="el-icon-document"></i>
                            <span style="font-size: 12px">{{file.name}}</span>
                            <span v-if="file.info" style="font-size: 10px ;color: #8c939d">({{file.info}})</span></p>

                        </a>
                        <div style="color:grey;text-align: center;line-height: 50px" v-if="item.fileList.length < 1">
                          没有文件...
                        </div>
                      </el-col>
                      <el-col :span="8">
                        <el-alert
                          :closable="false" title="相关图片，可点击查看大图" type="info" show-icon>
                        </el-alert>
                        <el-image
                          style="width: 100px; height: 100px;cursor: pointer;border: 1px #a6a6a6 solid" :key="index"
                          v-for="(img,index) in item.picList"
                          :src="constUrl + img.url" @click="previewImg(index,item.picList)"
                          fit="fill"></el-image>
                        <div style="color:grey;text-align: center;line-height: 50px" v-if="item.picList.length < 1">
                          没有照片...
                        </div>
                      </el-col>
                    </el-row>

                  </el-card>
                </el-timeline-item>
              </el-timeline>
            </div>
            <picture-viewer ref="imageViewer"></picture-viewer>
          </el-drawer>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
  import Format from '@/utils/format'
  import UploadImg from "@/components/upload-img2";
  import Organization from '@/components/organization-unit/all'
  import UploadFile from '@/components/upload-file-isShow'
  import PictureViewer from "@/components/picture-viewer/index-name";
  import Permission from '@/utils/permission'
  import ItemMixins from "./item.mixins";
  import Enums from '@/utils/enums'

  import {
    progressAdd,
    getProgressList,
    getTimeTree,
    progressUpdate,
    updatePercentage
  } from '@/services/model/progress'
  import {
    getRoadSelectList,
    getDamageSelectList,
  } from '@/services/model/road-mgmt'
  import OrganizationTree from '@/components/organization-tree/all'
  import constUrl from '@/services/env'
  import {
    getMoreDictData
  } from '@/services/model/common'

  export default {
    mixins: [ItemMixins,Enums],
    components: {
      Organization,
      UploadFile,
      OrganizationTree,
      UploadImg,
      PictureViewer
    },
    data() {
      return {
        state:'',
        isDsabled1: false,
        isDsabled2: false,
        customColor: [
          {color: '#f56c6c', percentage: 20},
          {color: '#e6a23c', percentage: 40},
          {color: '#6f7ad3', percentage: 60},
          {color: '#1989fa', percentage: 80},
          {color: '#5cb87a', percentage: 100}
        ],
        EnumProgressList: [],
        EnumDamageTypeList: [],
        rules: {
          deptTreeId: {required: true, message: '请选择管养单位'},
          roadId: {required: true, message: '请选择路线'},
          damageId: {required: true, message: '请选择灾害点'},
          time: {required: true, message: '请选择时间'},
          fileList: {required: true, message: '请上传文件'}, picList: {required: true, message: '请上传图片'},
        },
        updateRules: {
          deptTreeId: {required: true, message: '请选择管养单位'}, time: {required: true, message: '请选择时间'},
          fileList: {required: true, message: '请上传文件'}, picList: {required: true, message: '请上传图片'},
        },
        roadList: [],
        damageList: [],
        timelineData: [],
        newForm: false,
        updateForm: false,
        timeline: false,
        deptTree: {
          breadList: [],//面包屑
          deptTreeId: '',
        },
        constUrl,
        tableList: [],
        currentRow: {
          picList: [],
          fileList: [],
        },
        damageInfo: {},
        form: {
          page: 1,
          pageSize: 10,
        },
      }
    },
    watch: {},
    filters: {
      formatTimer(timer) {
        if (timer) {
          return Format(new Date(timer), 'yyyy年MM月dd日')
        }
        return ''
      },
      gradeStatusButton(val) {
        switch (val) {
          case 1:
            return '立项批复'
          case 2:
            return '勘察设计'
          case 3:
            return '进入施工阶段'
          case 4:
            return '工程验收'
          case 5:
            return '销号'
        }
      },
      gradeStatusColor(val) {
        switch (val) {
          case 1:
            return 'background-color:#0073b7'
          case 2:
            return 'background-color:#03a9f4'
          case 3:
            return 'background-color:#ff851b'
          case 4:
            return 'background-color:#3f51b5'
          case 5:
            return 'background-color:#0073b7'
          case 6:
            return 'background-color:#0DC26B'
          default:
            return 'background-color:#e43321'
        }
      },
    },
    computed: {},
    methods: {
      //获取路线列表
      async changeDept() {
        this.deptRoadList = await this.getRoadListByDept(this.form.deptTreeId)
        let data=[]
        this.deptRoadList.map(x=>{
          data.push({
            id:x.id,
            value:x.name,
            name:x.name
          })
        })
        this.restaurants=data
      },
      querySearchAsync(queryString, cb) {
        var restaurants
        if(!queryString){
          restaurants = [];
        }else {
          restaurants = this.restaurants;

        }
        var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants;
        clearTimeout(this.timeout);
        this.timeout = setTimeout(() => {
          cb(results);
        }, 10 * Math.random());
      },
      createStateFilter(queryString) {
        return (state) => {
          return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) >-1);
        };
      },
      handleSelect(item) {
        this.form.roadId=item.id
        this.queryList()
      },
      handleChange(item){
        if(item==''){
          this.form.roadId=''
          this.queryList()
        }
      },
      // 判断权限
      hasPermission(permissionStr) {
        return Permission(this.$store.state.userInfo, permissionStr)
      },
      //施工进度
      increase() {
        this.currentRow.percentage += 10;
        if (this.currentRow.percentage > 100) {
          this.currentRow.percentage = 100;
        }
      },

      // 删除图片
      handleDeleteImg(index) {
        this.currentRow.picList.splice(index, 1);
      },
      // 上传成功后处理图片
      setFormImg(path) {
        let item = {
          name: "",
          time: "",
          url: path,
        };
        this.currentRow.picList.push(item);
      },
      validateUpdateForm() {
        this.$refs.updateForm.validate((valid) => {
          if (valid) {
            this.isDsabled1 = true
            this.progressUpdates()
          }
        })

      },
      editDetail(row, isConstruction) {
        this.currentRow = JSON.parse(JSON.stringify(row))
        this.currentRow.picList=[]
        if (this.$refs.uploadClear) {
          this.$refs.uploadClear.clears()
        }
        if (this.currentRow.progressType == 3 || isConstruction) {
          this.currentRow.percentage += 10
          this.updateRules.fileList = {required: false, message: '请上传文件'}
          this.updateRules.picList = {required: true, message: '请上传图片'}
        }else {
          this.updateRules.fileList = {required:true, message: '请上传文件'}
          this.updateRules.picList = {required: false, message: '请上传图片'}
        }
        //是否是填写施工进度
        this.currentRow.isConstruction = isConstruction
        this.updateForm = true
        this.$nextTick(() => {
          this.$refs.updateForm.clearValidate();
        })
      },
      async checkDetail(row) {
        this.currentRow = JSON.parse(JSON.stringify(row))
        let {data} = await getTimeTree({id: this.currentRow.id})
        this.timelineData = data || []
        this.timeline = true
      },
      // 表单校验
      validateForm() {

        this.$refs.form.validate((valid) => {
          if (valid) {
            this.isDsabled2 = true

            this.submit()
          }
        })
      },
      //养护工程更新
      async progressUpdates() {
        try{
          let action = this.currentRow.isConstruction ? updatePercentage : progressUpdate
          let res = await action(this.currentRow)
          this.isDsabled1 = false
          if (res.code === 200) {
            this.$notify({
              type: 'success',
              title: '提示',
              message: '操作成功'
            })

            this.updateForm = false
            this.queryList()
          }
        }catch (e) {
          this.isDsabled1 = false
        }


      },
      // 添加养护工程提交
      async submit() {
        let res = await progressAdd(this.currentRow)
        this.isDsabled2 = false
        if (res.code === 200) {
          this.$notify({
            type: 'success',
            title: '提示',
            message: '添加成功'
          })
          this.newForm = false
          this.queryList()
        }
      },
      //查询灾害点列表
      async changeRoad() {
        this.$set(this.currentRow, 'damageId', '');
        this.damageList = [];
        let {data} = await getDamageSelectList(this.currentRow)
        this.damageList = data
      },
      // 弹窗里面获取路线
      async changeDeptOrganization() {
        this.$set(this.currentRow, 'roadId', '');
        this.$set(this.currentRow, 'damageId', '');
        this.roadList = []
        this.damageList = []
        const {data} = await getRoadSelectList({deptId: this.currentRow.deptTreeId})
        this.roadList = data
      },
      getDamagePointList(item) {
        if (!this.currentRow.deptTreeId) {
          this.$message('请先选择管养单位');
          return
        }
        if (item !== 'roadId' && !this.currentRow.roadId) {
          this.$message('请先选择路线');
          return
        }
      },

      // 新增养护工程
      add() {
        this.currentRow = {
          damageType: 1,
          picList: [],
        }
        this.newForm = true
        this.$nextTick(() => {
          this.$refs.form.clearValidate();
        })
      },
      //面包屑跳转
      breadClick(deptTreeId) {
        this.$refs.deptTree.changeBread(deptTreeId)
      },
      //组织机构组件回调
      selectOrgHandel() {
        this.$forceUpdate()
        this.form.deptTreeId = this.deptTree.deptTreeId
        this.queryList()
        this.changeDept()
      },
      // 查看大图
      previewImg(index, urls) {
        const urlList = JSON.parse(JSON.stringify(urls));
        urlList.map((x) => {
          x.url = this.constUrl + x.url;
          return x;
        });
        // 显示照片查看器
        this.$refs.imageViewer.showViewer(urlList, index);
      },
      // 获取当前的序号
      getIndex(index) {
        let param = (this.form.page - 1) * this.form.pageSize + index + 1
        return param
      },
      async queryList() {
        let res = await getProgressList(this.form)
        this.tableList = res.data?.records || []
        this.form.page = Number(res.data?.current)
        this.form.total = Number(res.data?.total)
      },
      // 分页大小改变
      handleSizeChange(val) {
        this.form.pageSize = val
        this.queryList()
      },
      // 当前页码改变
      handleCurrentChange(val) {
        this.form.page = val
        this.queryList()
      },
      async changeDamageType() {
        const {deptTreeId, roadId, damageType} = this.currentRow
        if (!deptTreeId || !roadId) {
          return
        }
        this.$set(this.currentRow, 'damageId', '');
        const {data} = await getDamageSelectList({deptTreeId: deptTreeId, roadId: roadId, damageType: damageType})
        this.damageList = data
      },
    },
    mounted() {
      this.queryDictList(['EnumProgress', 'EnumDamageType'], ['EnumProgressList', 'EnumDamageTypeList'])
    },
    activated() {
    },
  }


</script>
<style scoped="scoped" lang="less">
  .bread_button_text {
    padding-right: 0px;
    font-size: 18px;
    font-weight: 600;
    color: #1990FE;
  }

  .file_table {
    /deep/ .el-table th, td {
      padding: 0px 0px;
    }

    .el-form-item__content {
      height: 10px !important;
    }
  }

  .time_line {
    .info {
      margin-top: 10px;
      margin-left: 10px;
      font-size: 14px;
      color: #8c939d;
    }
  }

  .automatic {
    /deep/ .el-upload-list {
      display: none;
    }
  }

  .box-view {
    .left_org {
      height: calc(100% - 83px);
      border-radius: 8px;
    }

    .page {
      .page_filter {
        padding: 0px 20px;
      }
    }
  }

  .bread_button_text {
    padding-right: 0px;
    font-size: 18px;
    font-weight: 600;
    color: #1990FE;
  }

  /deep/ .demo-drawer {

    .demo-drawer__content {
      margin-top: 20px;
      width: 96%;
      height: 90%;
    }

    .demo-drawer__footer {
      bottom: 4%;
    }
  }

  .s-detail ul li {
    padding: 7px;
    border-bottom: 1px solid #1b1b1b;
    font-weight: bold;
    font-size: 15px;
    color: #1990FE;
  }

  .s-detail {
    /deep/ .el-button {
      border: 1px solid #DCDFE6 !important;
    }
  }

  .s-detail ul li span {
    font-weight: normal;
    font-size: 12px;
    color: #1b1b1b;
  }

  .delete_button {
    color: #ff4d51;
  }
</style>
<style>
  .btn_add2 {
    background: #1990FE !important;
    color: white !important;
    padding: 4px 6px;
    border-radius: 5px;
  }
</style>
